<script lang="ts">
	import { copyToClipboard } from '$lib/utils/clipboard/clipboard';
	/** 图标信息类型 */
	interface IconItem {
		path: string; // 最终复制的路径（如 icons/interface/sun）
		fullPath: string; // 完整导入路径（用于匹配搜索）
		name: string; // 图标名称（如 sun）
		component: any; // SVG 组件
	}

	// 🔥 批量导入 assets/icons 下所有 SVG 文件（支持多级目录）
	// 注意：路径需根据组件实际位置调整（当前假设组件在 src/lib/components/IconLibrary.svelte）
	const iconModules = import.meta.glob('$lib/assets/icons/**/*.svg', {
		eager: true,
		import: 'default' // 导入 SVG 组件（Vite 内置支持）
	});

	/** 处理图标数据：提取路径、名称，格式化数据结构 */
	const processIconModules = (modules: Record<string, any>): IconItem[] => {
		return Object.entries(modules).map(([fullPath, component]) => {
			// 提取相对路径：去掉 assets/ 前缀和 .svg 后缀
			const path = fullPath
				.replace(/^.*?icons\//, '') // 去掉 icons 之前的路径
				.replace(/\.svg$/, ''); // 去掉 .svg 后缀

			// 提取图标名称：取路径最后一段（如 sun）
			const name = path.split('/').pop() || '';

			return {
				path,
				fullPath,
				name,
				component
			};
		});
	};

	// 所有图标原始数据
	const allIcons = $state<IconItem[]>(processIconModules(iconModules));
	// 搜索关键词（响应式）
	let searchKeyword = $state('');
	// 过滤后的图标列表（用于渲染
	let nonAnimateIcons = $state<IconItem[]>([]); // 非动画图标（不包含 animate/）
	let animateIcons = $state<IconItem[]>([]); // 动画图标（包含 animate/）
	// 复制提示相关状态
	const copyTip = $state({
		show: false,
		text: ''
	});

	/** 搜索过滤逻辑：模糊匹配路径或名称 */
	$effect(() => {
		const keyword = searchKeyword.trim().toLowerCase();
		let filtered: IconItem[];
		if (!keyword) {
			filtered = [...allIcons];
		} else {
			filtered = allIcons.filter(
				(icon) =>
					icon.path.toLowerCase().includes(keyword) || icon.name.toLowerCase().includes(keyword)
			);
		}

		// 直接赋值过滤后的新数组，打破循环
		nonAnimateIcons = filtered.filter((icon) => !icon.path.includes('animate/'));
		animateIcons = filtered.filter((icon) => icon.path.includes('animate/'));
	});

	/** 复制图标路径到剪贴板 */
	const copyIconPath = (path: string) => {
		copyToClipboard(path);
	};

	/** 处理鼠标进入动画图标 */
	const handleMouseEnter = (event: MouseEvent) => {
		const svgElement = (event.currentTarget as HTMLElement).querySelector('svg');
		if (svgElement) {
			// 播放所有动画元素
			const animations = svgElement.querySelectorAll('animate, animateTransform, animateMotion');
			animations.forEach((anim) => {
				(anim as SVGAnimationElement).beginElement();
			});

			// 对于 CSS 动画
			svgElement.style.animationPlayState = 'running';
		}
	};

	/** 处理鼠标离开动画图标 */
	const handleMouseLeave = (event: MouseEvent) => {
		const svgElement = (event.currentTarget as HTMLElement).querySelector('svg');
		if (svgElement) {
			// 暂停 CSS 动画
			svgElement.style.animationPlayState = 'paused';
		}
	};
</script>

<div class="icon-library">
	<!-- 搜索框 -->
	<div class="search-container">
		<input
			type="text"
			bind:value={searchKeyword}
			placeholder="搜索图标（路径/名称）"
			class="search-input"
		/>
		<p class="icon-count">
			共 {allIcons.length} 个图标，当前显示 {nonAnimateIcons.length + animateIcons.length} 个
		</p>
	</div>

	<!-- 图标网格展示区 -->
	<!-- 非动画图标网格 -->
	{#if nonAnimateIcons.length > 0}
		<div class="grid-title">非动画图标（{nonAnimateIcons.length} 个）</div>
		<div class="icons-grid">
			{#each nonAnimateIcons as icon (icon.path)}
				<div
					class="icon-item"
					onclick={() => copyIconPath(icon.path)}
					title="点击复制路径：{icon.path}"
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					<!-- 渲染 SVG 图标 -->
					<div class="icon-svg">
						<icon.component width={24} height={24}></icon.component>
					</div>
					<!-- 显示图标路径 -->
					<div class="icon-path">{icon.path}</div>
				</div>
			{/each}
		</div>
	{/if}

	<!-- 动画图标网格 -->
	{#if animateIcons.length > 0}
		<div class="grid-title">动画图标（{animateIcons.length} 个）</div>
		<div class="icons-grid">
			{#each animateIcons as icon (icon.path)}
				<div
					class="icon-item"
					onclick={() => copyIconPath(icon.path)}
					onmouseenter={handleMouseEnter}
					onmouseleave={handleMouseLeave}
					title="点击复制路径：{icon.path}"
					onkeydown={() => {}}
					role="button"
					tabindex="0"
				>
					<!-- 渲染 SVG 图标 -->
					<div class="icon-svg">
						<icon.component width={24} height={24}></icon.component>
					</div>
					<!-- 显示图标路径 -->
					<div class="icon-path">{icon.path}</div>
				</div>
			{/each}
		</div>
	{/if}
	<!-- 无匹配结果提示（两个分类都为空时显示） -->
	{#if nonAnimateIcons.length === 0 && animateIcons.length === 0 && searchKeyword.trim()}
		<div class="empty-tip">未找到匹配关键词「{searchKeyword}」的图标</div>
	{/if}
</div>

<style scoped lang="scss">
	.icon-library {
		width: 100%;
		padding: 10px 0;
		box-sizing: border-box;
	}

	/* 搜索框样式 */
	.search-container {
		display: flex;
		align-items: flex-end;
		gap: 16px;
		flex-direction: column;
	}

	.search-input {
		width: 100%;
		padding: 10px 16px;
		border: var(--border);
		border-radius: 8px;
		font-size: 14px;
		transition: border-color 0.2s;

		&:focus {
			outline: none;
			border-color: var(--color-primary-500);
			box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
		}
	}

	.icon-count {
		font-size: 13px;
		color: var(--color-info-600);
		margin-right: 10px;
	}

	/* 图标网格样式 */
	.icons-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 10px;
	}

	.grid-title {
		height: 50px;
		line-height: 50px;
		font-weight: 600;
	}

	.icon-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px;
		border: var(--border);
		border-radius: 8px;
		cursor: pointer;
		transition: all 0.2s;

		&:hover {
			border-color: var(--color-info-900);
			transform: translateY(-2px);
		}
	}

	.icon-svg {
		width: 48px;
		height: 48px;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon-path {
		font-size: 12px;
		text-align: center;
		word-break: break-all;
		max-width: 100%;
		font-family: sans-serif;
	}

	/* 空状态提示 */
	.empty-tip {
		grid-column: 1 / -1;
		text-align: center;
		padding: 64px 0;
		color: var(--color-info-400);
		font-size: 14px;
	}
</style>
